<template>
  <div id="app">
    <!-- 搜索部分 -->
    <!-- <div class="store_search"> -->
    <van-search
      :value="value"
      placeholder="搜索商品名称"
      show-action
      @search="onSearch"
      @cancel="onCancel"
    />
    <div class="store_img" v-if="serchType">
      <img src="/static/images/store/searchFail.png" alt />
      <p>暂未搜索到相关商品</p>
    </div>
  </div>
</template>

<script>
import { queryGoods } from '@/api/api';
export default {
  props: {},
  data () {
    return {
      name: '',
      serchType: false,
      goodsParms: {
        selectSortType: '',
        goodsName: '',
        classifyId: '',
        integralMax: '',
        integralMin: '',
        pageIndex: 1,
        pageSize: 10
      }
    };
  },
  computed: {},
  created () {},
  mounted () {
    // 可以将当前状态的data重置为初始状态
    Object.assign(this.$data, this.$options.data());
  },
  watch: {},
  onShow () {
    // 清空搜索框里的内容
    this.name = '';
  },
  methods: {
    // 取消返回商城页
    onCancel () {
      console.log('11');
      wx.navigateBack({
        delta: 1
      });
    },
    // 搜索
    onSearch (e) {
      // console.log('e', e);
      this.loadMore = true;
      let text = e.mp.detail;
      this.goodsParms.goodsName = text;
      if (text === '') {
        wx.showToast({
          title: '请输入搜索内容',
          duration: 2000,
          mask: true,
          icon: 'none'
        });
      } else {
        this.goodLists();
      }
    },
    async goodLists () {
      if (this.loadMore) {
        await queryGoods(this.goodsParms).then(res => {
          this.productList = this.productList.concat(res.list);
          ++this.goodsParms.pageIndex;
          if (res.pages < this.goodsParms.pageIndex) {
            this.loadMore = false;
          }
          console.log(res);
        });
      }
    },
    /**
     * 根据名字查询查询
     */
    queryGoodsName (name) {
      wx.redirectTo({
        url: `/pages/store/children/commodityList/main?goodsName=${name}`
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
// 搜索部分
.store_search {
  padding: 15px;
  height: 34px;
  position: relative;
  background-color: #fff;
  display: flex;
  // 没有搜索到内容的时候
  .store_img {
    text-align: center;

    img {
      height: 175px;
      width: 230px;
      margin: 90px auto 40px;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      color: rgba(144, 146, 146, 1);
      line-height: 20px;
    }
  }
  input {
    flex: 1;
    background-color: #f8f8f8;
    height: 34px;
    width: 100%;
    padding-left: 37px;
    box-sizing: border-box;
    border-radius: 2px;
    font-size: 13px;
  }

  img {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
  }

  span {
    font-size: 14px;
    font-weight: 400;
    color: rgba(107, 107, 107, 1);
    line-height: 34px;
    margin-left: 15px;
  }
}
</style>
